<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>修改属性</title>
      <link rel="stylesheet" href="../css/reset.css">
      <link rel="stylesheet" href="../css/index.css">
      <link rel="stylesheet" href="../layer/mobile/need/layer.css">
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <style type="text/css">
         #modify {
            height: 100vh;
            display: flex;
         }

         .pet_left {
            height: 100%;
            text-align: center;
            padding: 20px 0;
            box-sizing: border-box;
         }

         .left {
            height: 100%;
            border-right: 1px solid #eeeeee;
         }

         .pet_left img {
            border-radius: 4px;
         }

         .pet_left p {
            margin-top: 20px;
            font-size: 18px;
            color: #000000;
            margin-bottom: 20px;
         }

         ._item_title {
            width: 80px;
            font-size: 16px;
         }

         .modify {
            position: relative;
         }

         .cont_item {
            width: 100%;
            margin-bottom: 5px;
            display: flex;
            justify-content: flex-start;
         }

         ._item_flex {
            max-width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
         }

         .cont_bottom {
            display: flex;
         }

         .cont_equip {
            position: absolute;
            right: 0;
            top: 0;
            width: 300px;
            height: 264px;
            border-radius: 15px;
         }

         .cont_equip ._equip_img {
            text-align: center;
         }

         .cont_equip ._equip_img ._img {
            width: 74px;
            height: 74px;
            border-radius: 4px;
         }

         .cont_equip ._equip_list {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
         }

         .cont_equip ._equip_item {
            width: 50%;
            display: flex;
            align-items: center;
            padding: 5px 3px;
         }

         .cont_equip ._equip_item ._item_input {
            flex: 1;
         }

         ._bottom_flex {
            flex: 1;

         }

         ._flex {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
         }

         ._bottom_title {
            font-size: 20px;
            color: #000000;
            margin-bottom: 10px;
            width: 100%;
         }

         ._bottom_item {
            width: 50%;
         }

         ._bottom_item span {
            margin-left: 10px;
         }

         ._cont_item {
            padding: 5px 0;
         }

         ._cont_item {
            padding: 5px 0;
         }

         ._cont_item span {
            padding: 0 5px;
         }

         ._cont_item ._item_xw {
            width: 150px;
         }

         .el-row {
            margin-bottom: 20px;
         }

         .el-row:last-child {
            margin-bottom: 0;
         }

         .el-col {
            border-radius: 4px;
         }

         .bg-purple-dark {
            background: #99a9bf;
         }

         .bg-purple {
            background: #d3dce6;
         }

         .bg-purple-light {
            background: #e5e9f2;
         }

         .grid-content {
            border-radius: 4px;
            min-height: 36px;
            width: 74px;
            height: 74px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f9fafc;
            margin-bottom: 20px;
            cursor: pointer;
         }

         .grid-content img {
            width: 74px;
            height: 74px;
            border-radius: 4px;
         }

         .grid-content i {
            font-size: 28px;
         }

         .row-bg {
            padding: 10px 0;
         }

         .skills_box {
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
         }

         .skills_box .box_item {
            width: 74px;
            text-align: center;
            cursor: pointer;
            margin: 10px;
         }

         .skills_box .box_item img {
            width: 74px;
            height: 74px;
            border-radius: 4px;
         }

         .skills_box .box_item p {
            font-size: 14px;
         }
      </style>
   </head>
   <body>
      <div id="modify" class="hide">
         <el-container>
            <el-aside width="200px">
               <div class="pet_left">
                  <div class="left">
                     <img :src="'.' + infoData.image" alt="头像">
                     <p>名称：{{infoData.rename}}</p>
                     <el-button type="primary" @click="modifyFun">保存</el-button>
                  </div>
               </div>
            </el-aside>
            <el-container>
               <el-main>
                  <div class="modify">
                     <div class="cont_item">
                        <div class="_item_flex">
                           <p class="_item_title">等级：</p>
                           <el-input v-model="infoData.grade" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="_item_flex">
                           <p class="_item_title">成长：</p>
                           <el-input v-model="infoData.cz" placeholder="请输入内容"></el-input>
                        </div>
                     </div>
                     <div class="cont_item">
                        <div class="_item_flex">
                           <p class="_item_title">体：</p>
                           <el-input v-model="infoData.ti" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="_item_flex">
                           <p class="_item_title">气血：</p>
                           <el-input v-model="infoData.sm" placeholder="请输入内容"></el-input>
                        </div>
                     </div>
                     <div class="cont_item">
                        <div class="_item_flex">
                           <p class="_item_title">灵：</p>
                           <el-input v-model="infoData.ling" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="_item_flex">
                           <p class="_item_title">灵力：</p>
                           <el-input v-model="infoData.ll" placeholder="请输入内容"></el-input>
                        </div>
                     </div>
                     <div class="cont_item">
                        <div class="_item_flex">
                           <p class="_item_title">力：</p>
                           <el-input v-model="infoData.li" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="_item_flex">
                           <p class="_item_title">物攻：</p>
                           <el-input v-model="infoData.wg" placeholder="请输入内容"></el-input>
                        </div>
                     </div>
                     <div class="cont_item">
                        <div class="_item_flex">
                           <p class="_item_title">耐：</p>
                           <el-input v-model="infoData.nai" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="_item_flex">
                           <p class="_item_title">物防：</p>
                           <el-input v-model="infoData.wf" placeholder="请输入内容"></el-input>
                        </div>
                     </div>
                     <div class="cont_item">
                        <div class="_item_flex">
                           <p class="_item_title">敏：</p>
                           <el-input v-model="infoData.min" placeholder="请输入内容"></el-input>
                        </div>
                        <div class="_item_flex">
                           <p class="_item_title">速度：</p>
                           <el-input v-model="infoData.sd" placeholder="请输入内容"></el-input>
                        </div>
                     </div>
                     <div class="cont_equip">
                        <div class="_equip_img">
                           <img class="_img" src="../image/ygby.jpg" alt="">
                           <div class="_equip_list">
                              <div class="_equip_item">
                                 生命：
                                 <el-input class="_item_input" size="small" placeholder="请输入内容"
                                    v-model="infoData.by_sm"></el-input>
                              </div>
                              <div class="_equip_item">
                                 物攻：
                                 <el-input class="_item_input" size="small" placeholder="请输入内容"
                                    v-model="infoData.by_wg"></el-input>
                              </div>
                              <div class="_equip_item">
                                 法伤：
                                 <el-input class="_item_input" size="small" placeholder="请输入内容"
                                    v-model="infoData.by_fs"></el-input>
                              </div>
                              <div class="_equip_item">
                                 物防：
                                 <el-input class="_item_input" size="small" placeholder="请输入内容"
                                    v-model="infoData.by_wf"></el-input>
                              </div>
                              <div class="_equip_item">
                                 法防：
                                 <el-input class="_item_input" size="small" placeholder="请输入内容"
                                    v-model="infoData.by_ff"></el-input>
                              </div>
                              <div class="_equip_item">
                                 速度：
                                 <el-input class="_item_input" size="small" placeholder="请输入内容"
                                    v-model="infoData.by_sd"></el-input>
                              </div>
                           </div>
                        </div>
                     </div>
                     <el-divider></el-divider>
                     <div class="_item_cont padding_left">
                        <div class="_bottom_title">修为:</div>
                        <div class="_cont_item">
                           人物境界：
                           <el-select size="small" v-model="infoData.realm" placeholder="请选择">
                              <el-option v-for="(item,index) in boundary" :key="index"
                                 :label="item.name + '-' + item.up + '%'" :value="index">
                              </el-option>
                           </el-select>
                        </div>
                        <div class="_cont_item">
                           宠物修炼：
                           伤害:
                           <el-select size="small" class="_item_xw" v-model="infoData.etc_sh" placeholder="请选择">
                              <el-option v-for="(item,index) in practice" :key="index"
                                 :label="item.name + '-' + item.up + '%'" :value="index">
                              </el-option>
                           </el-select>
                           物防:
                           <el-select size="small" class="_item_xw" v-model="infoData.etc_wf" placeholder="请选择">
                              <el-option v-for="(item,index) in practice" :key="index"
                                 :label="item.name + '-' + item.up + '%'" :value="index">
                              </el-option>
                           </el-select>
                           法防:
                           <el-select size="small" class="_item_xw" v-model="infoData.etc_ff" placeholder="请选择">
                              <el-option v-for="(item,index) in practice" :key="index"
                                 :label="item.name + '-' + item.up + '%'" :value="index">
                              </el-option>
                           </el-select>
                        </div>
                     </div>
                     <div class="cont_bottom">
                        <div class="_bottom_flex _flex">
                           <div class="_bottom_title">面板:</div>
                           <div class="_bottom_item">
                              气血:<span>{{qixie}}</span>
                           </div>
                           <div class="_bottom_item">
                              物防:<span>{{wufang}}</span>
                           </div>
                           <div class="_bottom_item">
                              物攻:<span>{{wugong}}</span>
                           </div>
                           <div class="_bottom_item">
                              法防:<span>{{fafang}}</span>
                           </div>
                           <div class="_bottom_item">
                              法攻:<span>{{fashang}}</span>
                           </div>
                           <div class="_bottom_item">
                              速度:<span>{{sudu}}</span>
                           </div>
                        </div>
                        <div class="_bottom_flex">
                           <div class="_bottom_title">技能:</div>
                           <el-row :gutter="20">
                              <el-col :span="4" v-for="(item,index) in infoData.skills" :key="index"
                                 @click="checkSkill">
                                 <el-tooltip class="item" effect="dark" content="点击删除" placement="top-start">
                                    <div class="grid-content bg-purple" @click="deleteSkill(item,index)">
                                       <img :src="'.' + item.src" alt="">
                                    </div>
                                 </el-tooltip>
                              </el-col>
                              <el-col :span="4" v-if="infoData.skills.length < infoData.skill + 2">
                                 <div class="grid-content bg-purple" @click="addSkill">
                                    <i class="el-icon-plus"></i>
                                 </div>
                              </el-col>
                           </el-row>
                        </div>
                     </div>
                  </div>
               </el-main>
            </el-container>
         </el-container>
      </div>
   </body>
   <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
   <script src="../js/vue.min.js"></script>
   <script src="../layer/layer.js"></script>
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <script src="../js/pets.json" type="text/javascript" charset="utf-8"></script>
   <script src="../js/skills.json" type="text/javascript" charset="utf-8"></script>
   <script src="../js/boundary.json" type="text/javascript" charset="utf-8"></script>
   <script src="../js/practice.json" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
      let tableData = localStorage.getItem('tableData') ? JSON.parse(localStorage.getItem('tableData')) : [];
      let huo_element = 0;
      let bing_element = 0;
      let dian_element = 0;
      let du_element = 0;
      let shui_element = 0;
      var app = new Vue({
         el: "#modify",
         data: {
            infoData: {},
            index: 0,
            boundary: boundary,
            practice: practice,
         },
         computed: {
            qixie() {
               var result = Math.round(50 + this.infoData.sm * this.infoData.grade * 10 / 1000 + this.infoData
                  .ti * 3 * this.infoData.cz);
               result = Math.round(parseInt(result) * (100 + this.infoData.smUp) / 100) + parseInt(this.infoData
                  .by_sm);
               this.infoData.qixie = result;
               return result;
            },
            fashang() {
               var result = Math.round((this.infoData.ling * 0.5 + this.infoData.li * 0.3 + (parseInt(this
                     .infoData.ti) + parseInt(this.infoData.nai)) * 0.1) * this.infoData.cz + this.infoData
                  .grade * this.infoData.ll / 1000 * 1.425 + 80) + parseInt(this.infoData.by_fs) + Math.round(
                  this.infoData.fqUp * this.infoData.ling / 100);
               this.infoData.fashang = result;
               return result
            },
            fafang() {
               var result = Math.round((this.infoData.ling * 0.5 + this.infoData.li * 0.3 + (parseInt(this
                     .infoData.ti) + parseInt(this.infoData.nai)) * 0.1) * this.infoData.cz + this.infoData
                  .grade * this.infoData.ll / 1000 * 0.62) + parseInt(this.infoData.by_ff);
               this.infoData.fafang = result;
               return result
            },
            wugong() {
               var result = Math.round(this.infoData.wg * 5 * this.infoData.grade / 1000 + this.infoData.li * this
                  .infoData.cz * 0.5 + 100) + parseInt(this.infoData.by_wg);
               this.infoData.wugong = result;
               return result;
            },
            wufang() {
               var result = Math.round(parseInt(this.infoData.nai * this.infoData.cz) + this.infoData.wf * this
                  .infoData.grade * 3.33 / 1000) + parseInt(this.infoData.by_wf);
               this.infoData.wufang = result;
               return result
            },
            sudu() {
               var result = Math.round(((parseInt(this.infoData.ti) + parseInt(this.infoData.li) + parseInt(this
                     .infoData.nai)) * 0.1 + this.infoData.ling * 0.05 + this.infoData.min * 0.5) * this
                  .infoData.cz + this.infoData.grade * this.infoData.sd * 2.215 / 1000) + parseInt(this
                  .infoData.by_sd);
               result = Math.round(parseInt(result) * (100 + this.infoData.sdUp) / 100);
               this.infoData.sudu = result;
               return result
            }
         },
         created() {
            this.index = getUrlParms('index');
            this.infoData = tableData[this.index];
            let index = pets.findIndex((item) => item.name == this.infoData.name);
            huo_element = pets[index].huo_element;
            bing_element = pets[index].bing_element;
            dian_element = pets[index].dian_element;
            du_element = pets[index].du_element;
            shui_element = pets[index].shui_element;
            this.resetSillt();
         },
         methods: {
            modifyFun() {
               tableData[this.index] = this.infoData;
               localStorage.setItem('tableData', JSON.stringify(tableData));
               this.$message({
                  type: 'success',
                  message: '修改成功!'
               });
            },
            resetSillt() {
               this.infoData.sdUp = 0;
               this.infoData.smUp = 0;
               this.infoData.adUp = 0;
               this.infoData.apUp = 0;
               this.infoData.fqUp = 0;
               this.infoData.wc = 0;
               this.infoData.fc = 0;
               this.infoData.elude = 0;
               this.infoData.isWl = 0;
               this.infoData.isFl = 0;
               this.infoData.isSj = 0;
               this.infoData.critWb = 2;
               this.infoData.critFb = 2;
               this.infoData.adImmune = 0;
               this.infoData.apImmune = 0;
               this.infoData.leech = 0;
               this.infoData.reborn = 0;
               this.infoData.isBlock = 0;
               this.infoData.holyPressure = 0;
               this.infoData.skillAttr = '';
               this.infoData.skillname = '';
               this.infoData.huo_element = huo_element;
               this.infoData.bing_element = bing_element;
               this.infoData.dian_element = dian_element;
               this.infoData.du_element = du_element;
               this.infoData.shui_element = shui_element;
               console.log(this.infoData.huo_element, this.infoData.bing_element, this.infoData.dian_element, this
                  .infoData.du_element, this.infoData.shui_element)
               this.infoData.skills.forEach((item, index) => {
                  if (item.upType == "sd") { // 速度
                     this.infoData.sdUp += item.up;
                     this.infoData.sdUp -= item.down;
                  } else if (item.upType == "sm") { //生命
                     this.infoData.smUp += item.up;
                     this.infoData.elude += item.down;
                  } else if (item.upType == "sh") { //伤害
                     if (item.attr == 'ad') {
                        this.infoData.adUp += item.up;
                        this.infoData.apImmune -= item.down;
                     } else if (item.attr == 'ap') {
                        this.infoData.apUp += item.up;
                     } else if (item.attr == 'all') {
                        this.infoData.adUp += item.up;
                        this.infoData.apUp += item.up;
                     }
                     // if (item.attr == 'ad') {
                     //    this.infoData.adUp = this.infoData.adUp * item.up;
                     //    this.infoData.apImmune -= item.down;
                     // } else if (item.attr == 'ap') {
                     //    this.infoData.apUp = this.infoData.apUp * item.up;
                     // } else if (item.attr == 'all') {
                     //    this.infoData.adUp = this.infoData.adUp * item.up;
                     //    this.infoData.apUp = this.infoData.apUp * item.up;
                     // }
                  } else if (item.upType == "wc") { //物穿
                     this.infoData.wc += item.up;
                  } else if (item.upType == "bj") { //暴击
                     if (item.attr == 'wb') {
                        this.infoData.critWb += item.up;
                     } else if (item.attr == 'fb') {
                        this.infoData.critFb += item.up;
                     }
                  } else if (item.upType == "wl") { //物连
                     this.infoData.isWl = item.up;
                     this.infoData.adUp -= item.down;
                  } else if (item.upType == "fl") { //法连
                     this.infoData.isFl = item.up;
                  } else if (item.upType == "jn") { //技能
                     this.infoData.skillAttr = item.attr;
                     this.infoData.skillname = item.name;
                  } else if (item.upType == "sj") { //随机
                     this.infoData.isSj = item.upType;
                     this.infoData.sjMin = -item.down;
                     this.infoData.sjMax = item.up;
                  } else if (item.upType == "fc") { //法穿
                     this.infoData.fc = item.up;
                  } else if (item.upType == "ts") { //特殊
                     if (item.attr == 'cs') {
                        this.infoData.reborn = item.up;
                     } else if (item.attr == 'sx') {
                        this.infoData.leech = item.up;
                     } else if (item.attr == 'sf') {
                        this.infoData.adUp += item.up;
                        this.infoData.apUp += item.up;
                        this.infoData.holyPressure = item.down;
                     }
                  } else if (item.upType == 'fq') { //法强
                     this.infoData.fqUp = item.up;
                     this.infoData.adImmune -= item.down;
                  } else if (item.upType == 'fy') { //防御
                     if (item.attr == 'ad') {
                        this.infoData.adImmune += item.up;
                     } else if (item.attr == 'ap') {
                        this.infoData.apImmune += item.up;
                     } else if (item.attr == 'gd') {
                        this.infoData.isBlock = item.up;
                     }
                  } else if (item.upType == 'ys') { //元素
                     this.infoData.skillAttr = item.attr;
                  } else if (item.upType == 'qh') { //亲和
                     this.infoData[item.attr] += item.up;
                  } else if (item.upType == 'zs') { //专属
                     if (item.attr == 'yszz') {
                        this.infoData.exclusive = item.attr;
                        this.infoData.huo_element += item.up;
                        this.infoData.bing_element += item.up;
                        this.infoData.dian_element += item.up;
                        this.infoData.du_element += item.up;
                        this.infoData.shui_element += item.up;
                     }
                  }
               })
               console.log(this.infoData);
            },
            checkSkill() {
               console.log('ddd');
            },
            deleteSkill(item, index) {
               this.infoData.skills.splice(index, 1);
               this.resetSillt();
            },
            addSkill() {
               var _this = this;
               var html = `
                  <div class="skills_box">`;
               for (let var1 in skills) {
                  html += `
                     <div class="box_item" data-id="${var1}" data-name="${skills[var1].name}">
                        <img src=".${skills[var1].src}" alt="${skills[var1].name}">
                        <p>${skills[var1].name}</p>
                     </div>`;
               }
               html += `</div>`;
               var index = layer.open({
                  type: 1,
                  title: '技能',
                  area: ['530px', '300px'],
                  content: html //这里content是一个普通的String
               });
               $('.box_item').unbind().click(function() {
                  var name = $(this).attr('data-name');
                  var id = $(this).attr('data-id');
                  var addFlag = true;
                  _this.infoData.skills.forEach((item, index) => {
                     if (item.name == name) {
                        addFlag = false;
                     }
                     if (_this.infoData.skills.length >= _this.infoData.skill + 2) {
                        addFlag = false;
                     }
                  })
                  if (addFlag) {
                     _this.infoData.skills.push(skills[id]);
                     _this.resetSillt();
                  }
               })
            }
         },
         mounted() {
            document.querySelector('#modify').classList.remove('hide');
         }
      })

      function getUrlParms(name) {
         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if (r != null)
            return unescape(r[2]);
         return null;
      }
   </script>
</html>
